Springboot+vue前后端分离(所有项目通用)

2023-08-14 01:22| 来源: 网络整理| 查看: 265

前情说明:本代码暂时只供本人实用，可以实现效果，如大家有觉得需要改进或者可以用到的地方，可以随时给我建议和意见谢谢

前端vue

按钮

点击添加说明

method

/** 导入按钮操作 */ handleImport() { this.upload.title = "用户导入"; this.upload.open = true; },

data

data(){ return{ upload: { // 是否显示弹出层（用户导入） open: false, // 弹出层标题（用户导入） title: "", // 是否禁用上传 isUploading: false, // 是否更新已经存在的用户数据 updateSupport: 0, // 设置上传的请求头部 headers: { Authorization: "Bearer " + getToken() }, // 上传的地址 url: process.env.VUE_APP_BASE_API + "/daq/filesub/importUrl" }, imageUrl: '', } }

弹出框

将文件拖到此处，或点击上传是否更新已经存在的用户数据仅允许导入.png、.jpg、.jpeg格式的图片。确定取消

method

/** 文件上传中处理 */ handleFileUploadProgress(event, file, fileList) { this.upload.isUploading = true; }, /** 文件上传成功处理 */ handleFileSuccess(response, file, fileList) { this.imageUrl = URL.createObjectURL(file.raw); console.log(this.imageUrl) this.upload.open = false; this.upload.isUploading = false; this.form.importsysRemark = this.imageUrl; this.$refs.upload.clearFiles(); this.getList(); }, /** 提交上传文件 */ submitFileForm() { this.$refs.upload.submit(); }

data(){ return{ // 表单参数 form: { id: null, importsysId: null, importsysName: null, importsysZid: null, importsysStage: null, importsysDutyBranch: null, importsysRelatedBranch: null, importsysInput: null, importsysOutput: null, importsysCreateTime: null, importsysUpdateTime: null, importsysRemark: null } } }

添加提交按钮

/** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateImportsys(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addImportsys(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.fileadd = false; this.getList(); }); } } }); },

style

.avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; }

后端springboot

application

file: domain: http://localhost:${server.port}// enable: true path: D:\picture # Spring配置 spring: # 资源信息 messages: # 国际化资源文件路径 basename: i18n/messages profiles: active: druid # 文件上传 servlet: multipart: # 单个文件大小 max-file-size: 10MB # 设置总上传的文件大小 max-request-size: 100MB

controller

/** * @Author: YangZhiSen * @Date: 2021/12/14 9:58 * @text: 文件上传到服务器 */ @ApiOperation("图片上传") @ResponseBody @PreAuthorize("@ss.hasPermi('daq:filesub:importUrl')") @PostMapping("/importUrl") public String importData(@RequestParam("file") MultipartFile file) throws Exception { String filename = UUID.randomUUID().toString()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); File filepath = new File("D:\\picture\\pic\\" + filename); String url = String.valueOf(filepath); file.transferTo(filepath); System.err.println("图片存储地址是"+url); return url; }

【本文地址】

公司简介

联系我们